<template>
    <div id="my-earnings">
        <div class="selector">
            <div class='select' @click="brand">
                {{dealloan}}<x-icon type="ios-arrow-up" size="20" v-show="show01"></x-icon>
                <x-icon type="ios-arrow-down" size="20" v-show="!show01"></x-icon></div>
            <div class='select' @click="time">
                {{dealtime}}<x-icon type="ios-arrow-up" size="20" v-show="show02"></x-icon>
                <x-icon type="ios-arrow-down" size="20" v-show="!show02"></x-icon>
            </div>
            <p class="clear"></p>
        </div>
        <div v-transfer-dom class="popup-client">
          <popup v-model="show01" position="top" max-height="50%" >
            <group>
              <cell v-for="(i,index) in chooselist01" :key="i" v-if="i">
                <div @click="choosebrand(index, i)">{{i}}</div>
              </cell>
            </group>
          </popup>
        </div>
        <div v-transfer-dom class="popup-client">
          <popup v-model="show02" position="top" max-height="50%">
            <group>
              <cell v-for="(i,index) in chooselist02" :key="i" v-if="i">
                <div @click="choosetime(index, i)">{{i}}</div>
              </cell>
            </group>
          </popup>
        </div>
        <scroller lock-x scrollbar-y use-pullup  @on-pullup-loading="loadMore"  v-model="status" ref="scroller">
          <div class="box2">
            <div style="height:1rem"></div>
            <load-more style="margin-top:2rem" v-if="nodatashow" :show-loading="false" :tip="'暂无交易记录'"></load-more>
            <div class="product-earnings" v-for="(item, index) in earningslist" :key="index">
                <flexbox class="flex-product">
                    <flexbox-item :span="3"><div class="flex-demo"><img :src="item.partnerLogoUrl" /></div></flexbox-item>
                    <flexbox-item>
                        <div class="flex-demo">
                            <flexbox orient="vertical">
                                <flexbox-item>
                                    <div class="flex-demo flex-datetime">
                                        <span>{{item.createTime}}</span>
                                    </div>
                                </flexbox-item>
                                <flexbox-item class="bottom-earning">
                                    <div class="flex-demo">
                                        <flexbox>
                                            <flexbox-item ><div class="flex-demo">获得来自<span>{{item.partnerName}}</span>的{{item.type | earningtype}}</div></flexbox-item>
                                            <flexbox-item :span="3"><div class="flex-demo flex-demo2">{{item.tranAmt}}<span>元</span></div></flexbox-item>
                                        </flexbox>
                                    </div>
                                </flexbox-item>
                            </flexbox>
                        </div>
                    </flexbox-item>
                </flexbox>
            </div>
        </div>
        <div slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 40px; bottom: -40px; text-align: center;">
          <span v-show="status.pullupStatus === 'default'"></span>
          <span class="pullup-arrow" v-show="status.pullupStatus === 'up'" :class="{'rotate': status.pullupStatus === 'up'}">松开加载</span>
          <span v-show="status.pullupStatus === 'loading'"><spinner type="ios-small"></spinner></span>
        </div>
      </scroller>
    </div>
</template>
<script>
var timeStamp = String(parseInt(Number(new Date()) / 1000))
import { Flexbox, FlexboxItem, TransferDom, Popup, Group, Cell, LoadMore, Scroller, Spinner } from 'vux'
import api from '../api'
import utils from '../utils'
export default {
  directives: {
    TransferDom
  },
  data () {
    return {
      earningslist: [],
      creditloanlist: [], // 获取信贷客合作方id
      chooselist01: ['全部'],
      chooselist02: ['全部', '今天', '3天内', '7天内', '30天内'],
      showlist: [],
      dealloan: '品牌',
      dealtime: '时间',
      tokenval: '',
      show01: false,
      show02: false,
      show13: false,
      nodatashow: false,
      PageNum: 100,
      count: 1, // 记录页数
      downnum: 0,
      partnerid: '',
      pullupEnabled: true,
      status: {
        pullupStatus: 'default',
        pulldownStatus: 'default'
      }
    }
  },
  components: {
    Flexbox,
    FlexboxItem,
    Popup,
    Group,
    Cell,
    LoadMore,
    Scroller,
    Spinner
  },
  created () {
    window.document.title = '交易明细'
    this.tokenval = utils.AuthToken(timeStamp, this.$store.state.userkey)
    this.apiEarnings(this.PageNum, this.downnum, this.partnerid)
    var params = {
      page: 1,
      perPage: 100
    }
    api.creditloan(params).then(res => {
      console.log(res)
      if (res.status === 200) {
        var arry = []
        var arryList = []
        arry = res.data.list
        for (var i in arry) {
          this.chooselist01.push(arry[i].partnerName)
          arryList.push(arry[i].partnerId)
        }
        this.creditloanlist = this.creditloanlist.concat(arryList)
      }
    })
    utils.jssdkwx(api, this.$wechat, this.$store)
  },
  methods: {
    apiEarnings (PageNum, downnum, partnerid) {
      var params = {
        Tokenuser: this.tokenval,
        userid: this.$store.state.userID,
        timestamp: timeStamp,
        page: 1,
        perPage: PageNum,
        partnerId: partnerid,
        searchDate: downnum
      }
      api.earnings(params).then(res => {
        console.log(res, 1)
        if (res.status === 200) {
          if (res.data) {
            if (res.data.list) {
              this.nodatashow = false
              this.earningslist = res.data.list
            } else {
              this.nodatashow = true
            }
          } else {
            this.nodatashow = true
          }
        }
      })
    },
    loadMore () {
      this.count ++
      this.PageNum = this.count * 10 + 100
      this.$vux.loading.show({
        text: '加载更多'
      })
      setTimeout(() => {
        this.apiEarnings(this.PageNum, this.downnum, this.partnerid)
        setTimeout(() => {
          this.$refs.scroller.donePullup()
        }, 10)
      }, 2000)
    },
    brand () {
      this.show01 = !this.show01
      this.show02 = false
    },
    time () {
      this.show02 = !this.show02
      this.show01 = false
    },
    choosebrand (index, val) {
      this.show01 = !this.show01
      this.dealloan = val
      this.earningslist = []
      if (index === 0) {
        this.partnerid = ''
        this.apiEarnings(this.PageNum, this.downnum, this.partnerid)
      } else {
        this.partnerid = this.creditloanlist[index - 1]
        this.apiEarnings(this.PageNum, this.downnum, this.partnerid)
      }
      this.show02 = false
    },
    choosetime (index, val) {
      this.show02 = !this.show02
      this.downnum = index
      this.dealtime = val
      this.earningslist = []
      this.apiEarnings(this.PageNum, this.downnum, this.partnerid)
    }
  }
}
</script>
